<template>
    <div class="w">
        <headers></headers>
        <shopping v-for="(s,i) in 2" :key="i"></shopping>
        <div class="fl">
            <div class="gd">
                <div class="xf">
                    <div class="qx">
                        <img v-if="bn" @click="bhClick" class="ty-img" src="/img/main-img/资源2@2x-8.png">
                        <img v-else @click="bhClick" class="ty-img" src="/img/main-img/资源1@2x-8.png">
                        <span class="q">全选</span>
                    </div>
                    <div class="jf">
                        <p class="q">总计:<span>￥0</span></p>
                        <p class="y">运费:￥0</p>
                    </div>
                </div>
                <span class="js">去结算 </span>
            </div>
        </div>
        
    </div>
</template>

<script>
import Headers from "../compontents/Headers.vue";
import shopping from "../compontents/shopping.vue";
export default {
    data(){
        return{
            bn:true,
        }
    },
    methods:{
        bhClick(){
            if(this.bn==false){
                this.bn = true;
            }else if(this.bn==true){
                this.bn = false;
            }
        },
    },
    components:{
        Headers,
        shopping
    }
}
</script>

<style scoped>
    .w{
        background-color: rgb(238, 238, 238);
        padding-bottom: 20vw;
    }
    .fl{
        position: fixed;
        bottom: 14vw;
    }
    .ty-img{
        width: 7vw;
        height: 7vw;
        cursor: pointer;
    }
    .gd{
        display: flex;
        justify-content: space-between;
        padding-left:5vw;
        background-color: white;
        font-size: 4vw;
    }
    .qx{
        display: flex;
        line-height: 13vw;
    }
    .qx img{
        position: relative;
        left: 0;
        top: 3vw;
        margin-right: 2vw;
    }
    .xf{
        width: 68vw;
        display: flex;
        justify-content: space-between;
    }
    .js{
        display: inline-block;
        background-color: #6ddac9;
        width: 24vw;
        text-align: center;
        line-height: 15vw;
        color: white;
        position: relative;
        right: -3vw;
    }
    .jf{
        padding-top: 1vw;
    }
    .q{
        color: #282828;
    }
    .q span{
        color: red;
    }
    .y{
        color: #dadada;
    }
</style>